<template>
  <!-- 服务组弹窗 -->
    <Modal v-model="groupVisible" :title="serviceGroupForm.groupId ? '编辑服务组' : '添加服务组'" @on-cancel="serviceGroupManiCancel">
      <div class="modal-add">
        <Form ref="serviceGroupForm" :model="serviceGroupForm" :rules="serviceGroupRules" :label-width="50" label-position="left">
          <FormItem label="名称" prop="name">
            <Input v-model.trim="serviceGroupForm.name" placeholder="请输入名称"></Input>
          </FormItem>
          <FormItem label="描述" prop="description">
            <Input type="textarea" v-model="serviceGroupForm.description" placeholder="请输入描述"></Input>
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <Button type="warning" @click="serviceGroupManiCancel">取消</Button>
        <Button type="primary" :loading="isAdding" @click="serviceGroupManiConf">确定</Button>
      </div>
    </Modal>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
export default {
  data() {
    const validateName = (rule, value, callback) => {
      let regName = /^(?![0-9-])[a-zA-Z0-9\-\u4e00-\u9fa5]*$/
      if (!value) {
        callback(new Error('请输入名称'))
      } else if (!regName.test(value)) {
        callback(new Error('由英文字母、数字、-、中文组成，不能以数字或-开头'))
      } else if (value.length < 4) {
        callback(new Error('最小长度不能少于4位'))
      } else if (value.length > 32) {
        callback(new Error('最大长度不能大于32位'))
      } else {
        callback()
      }
    }
    const validateDescription = (rule, value, callback) => {
      if (value && value.length > 128) {
        callback(new Error('最大长度不能大于128位'))
      } else {
        callback()
      }
    }

    return {
      serviceGroupForm: {
        groupId: '',
        name: '',
        description: '',
        environmentId: ''
      },
      isAdding: false,
      serviceGroupRules: {
        name: [
            { required: true, trigger: 'blur', validator: validateName }
        ],
        description: [
            { trigger: 'blur', validator: validateDescription }
        ]
      },
      groupVisible: false
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  mounted() {
  },
  methods: {
    // 确认添加服务组
    serviceGroupManiConf() {
      this.$refs.serviceGroupForm.validate((valid) => {
        if (valid) {
          this.isAdding = true
          if (this.serviceGroupForm.groupId) {
            Fetch.put({
              url: '/api/serviceGroup/edit',
              params: this.serviceGroupForm
            }).then((res) => {
              if (res && res.code === '0') {
                this.$Message.success('编辑服务组成功！')
                this.$emit('finish', res.data)
              } else {
                this.$Message.warning(res.message || '服务器内部错误')
              }
              this.isAdding = false
              this.$emit('update:visible', false)
            }).catch((error) => {
              this.isAdding = false
              this.$Message.error(error.message)
            })
          } else {
            Fetch.post({
              url: '/api/serviceGroup/add',
              params: this.serviceGroupForm
            }).then((res) => {
              if (res && res.code === '0') {
                this.$Message.success('添加服务组成功！')
                this.$emit('finish', res.data)
              } else {
                this.$Message.warning(res.message || '服务器内部错误')
              }
              this.isAdding = false
              this.$emit('update:visible', false)
            }).catch((error) => {
              this.isAdding = false
              this.$Message.error(error.message)
            })
          }
        } else {
          this.$Message.warning('请检查参数是否全部填写正确！')
          return false
        }
      })
    },
    // 取消服务组添加
    serviceGroupManiCancel() {
      this.$emit('update:visible', false)
    }
  },
  watch: {
    visible(val) {
      this.groupVisible = val
      if (val) {
        this.serviceGroupForm = Object.assign({}, this.form)
        this.$refs.serviceGroupForm.resetFields()
      }
    }
  }
}
</script>
